<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" href="/css/base.css">

    <script type="text/javascript" src="../../js/jquery/jquery-1.9.1.js"></script>
    <script src="../../lib/layer/layer.js?20201106"></script>
    <script src="../../js/news/page.js"></script>
    <script src="/js/jquery/jquery.cookie.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jquery.form.min.js"></script>
    <script src="../../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/video/webVideoCtrl.js"></script>
    <title>添加视频监控</title>
    <style>
        html,body{
            width:100%;
            height:100%
        }
        .title{
            height:70px;
            line-height:70px;
        }
        .title span{
            font-size: 22px;
            color: #494d59;
        }
        .title img{
            vertical-align: middle;
            padding-left:20px;
            float:left;
            margin:23px 5px 0px 0px;
        }
        .table{
            width:60%;
            margin:0 auto;
        }
        table{
            width:100%;
        }
        table td{
            border:1px solid #ccc;
        }
        table select{
            height:30px;
            border-radius: 3px;
        }
        table input{
            height:30px;
            line-height:30px;
            font-size:14px;
            width:280px;
            border-radius: 3px;
        }
        .btn{
            width:100%;
            text-align:center;
        }
        .weight{
            width:150px;
            font-size: 14px;
            color: #2a588c;
            font-weight: bold;
        }
        #query{
            background: url(../img/file/cabinet03.png) no-repeat;
            margin-right: 10px;
            cursor: pointer;
            display: inline-block;
            width: 80px;
            height: 28px;
            line-height: 28px;
        }
        #back{
            display: inline-block;
            width: 78px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            border-radius: 3px;
            background: url(../../img/edu/eduSchoolCalendar/back.png) no-repeat;
            padding-left: 7px;
            font-size: 14px;
        }
        #add{
            width: 71px;
            display: inline-block;
            height: 30px;
            color:#fff;
            line-height: 30px;
            border-radius: 4px;
            padding-left: 14px;
            cursor: pointer;
            background: url(../../img/sys/baocun.png) no-repeat;
            font-size: 12pt;
            font-family: Microsoft yahei,Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
        }

        table a{
            text-decoration: none;
            color:#207bd6;
            display: inline-block;
            margin-top:17px;
        }

    </style>
</head>
<body style="overflow:scroll;overflow-y: auto;overflow-x:hidden;">
<div>
    <div class="title">
        <img src="../../img/book/add.png" alt="">
        <span>新建视频监控</span>
    </div>
    <div class="table">
        <table>
            <form id="editVideoForm"  enctype="multipart/form-data">
                <tr>
                    <td class="weight">设备名称：<img class="td_title2" src="../img/mg2.png" alt=""></td>
                    <td>
                        <input type="text" class="deviceName" name="deviceName">
                    </td>
                </tr>
                <tr>
                    <td class="weight">设备id：<img class="td_title2" src="../img/mg2.png" alt=""></td>
                    <td>
                        <input type="text" class="deviceNo" name="deviceNo">
                    </td>
                </tr>
                <tr>
                    <td class="weight">设备型号：</td>
                    <td>
                        <input type="text" class="deviceModel" name="deviceModel">
                    </td>
                </tr>
                <tr>
                    <td class="weight">设备序列号：</td>
                    <td>
                        <input type="text" class="deviceNum" name="deviceNum">
                    </td>
                </tr>
                <tr>
                    <td class="weight">设备端口：</td>
                    <td>
                        <input name="devicePort" id="devicePort"></input>
                    </td>
                </tr>
                <tr>
                    <td class="weight">描述：</td>
                    <td>
                        <input type="text" class="desc" name="desc">
                    </td>
                </tr>
                <tr>
                    <td class="weight">gps地址：<img class="td_title2" src="../img/mg2.png" alt=""></td>
                    <td>
                        <input type="text" class="gpsAddress" name="gpsAddress">
                    </td>
                </tr>
                <tr>
                    <td class="weight">地址：<img class="td_title2" src="../img/mg2.png" alt=""></td>
                    <td>
                        <input type="text" class="address" name="address">
                    </td>
                </tr>
                <tr>
                    <td class="weight">IP地址：<img class="td_title2" src="../img/mg2.png" alt=""></td>
                    <td>
                        <input type="text" class="ip" name="ip">
                    </td>
                </tr>
                <tr>
                    <td class="weight">IP端口号：<img class="td_title2" src="../img/mg2.png" alt=""></td>
                    <td>
                        <input type="text" class="ipAport" name="ipAport">
                    </td>
                </tr>
                <tr>
                    <td class="weight">用户名：<img class="td_title2" src="../img/mg2.png" alt=""></td>
                    <td>
                        <input type="text" class="userName" name="userName">
                    </td>
                </tr>
                <tr>
                    <td class="weight">密码：<img class="td_title2" src="../img/mg2.png" alt=""></td>
                    <td>
                        <input type="text" class="password" name="password">
                    </td>
                </tr>
                <tr>
                    <td class="weight">码流类型：<img class="td_title2" src="../img/mg2.png" alt=""></td>
                    <td>
                        <select id="streamType" name="streamType">
                            <option value="1">主码流</option>
                            <option value="2">子码流</option>
                            <option value="3">第三码流</option>
                            <option value="4">转码码流</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="weight">所属社区：<img class="td_title2" src="../img/mg2.png" alt=""></td>
                    <td>
                        <select id="dept" name="dept">

                        </select>
                    </td>
                </tr>
            </form>
            <tr>
                <td colspan="2">
                    <div class="btn">
                        <span id="add">保存</span>
                        <span id="back">返回</span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<script>
    $(function(){

//        获得社区
        function getType(){
            $.ajax({
                url:'/gridInfo/gridSettingsTree',
                type:'get',
                data:{
                    deptId:0,
                    typeId:0
                },
                dataType:'json',
                success:function(res){
                    var data=res.obj;
                    var str=""
                    for(var i=0;i<data.length;i++){
                        str += '<option value="'+data[i].gridId+'">'+data[i].gridName+'</option>'
                    }
                    $('#dept').html(str)
                }
            })
        }
        getType();


        var ip='';
        var channelList='';
        var id ='';
//        点击添加
        $('#add').click(function(){

            if($(".deviceName").val()==''){
                layer.msg('设备名称不能为空！', {icon: 6});
                return;
            }
            if($(".deviceNo").val()==''){
                layer.msg('设备编号不能为空！', {icon: 6});
                return;
            }
            if($(".gpsAddress").val()==''){
                layer.msg('gps地址不能为空！', {icon: 6});
                return;
            }
            if($(".address").val()==''){
                layer.msg('地址不能为空！', {icon: 6});
                return;
            }
            if($(".ipAport").val()==''){
                layer.msg('IP端口号不能为空！', {icon: 6});
                return;
            }
            if($(".ip").val()==''){
                layer.msg('IP不能为空！', {icon: 6});
                return;
            }
            if($(".userName").val()==''){
                layer.msg('用户名不能为空！', {icon: 6});
                return;
            }
            if($(".password").val()==''){
                layer.msg('密码不能为空！', {icon: 6});
                return;
            }
            if($(".streamType").val()==''){
                layer.msg('码流类型不能为空！', {icon: 6});
                return;
            }
            if($(".dept").val()==''){
                layer.msg('社区编号不能为空！', {icon: 6});
                return;
            }

            ip=$(".ip").val();
            // 模拟通道
            WebVideoCtrl.I_GetAnalogChannelInfo(ip, {
                async: false,
                success: function (xmlDoc) {
                    var oChannels = $(xmlDoc).find("VideoInputChannel");
                    $.each(oChannels, function (i) {
                        id = $(this).find("id").eq(0).text();
                    });
                    channelList=id;
                    console.log(ip + " 获取模拟通道成功！");
                },
                error: function () {
                    console.log(ip + " 获取模拟通道失败！");
                }
            });

            $('#editVideoForm').ajaxSubmit({
                url:"/video/insertDevice",
                type:'post',
                data:{
                    channelList:id
                },
                dataType:'json',
                success:function (json) {
                    if(json.flag){
                        layer.msg(' 添加成功', {icon: 6});
                        self.parent.document.getElementById('iframe').src='/video/videoManager'
                    }else{
                        layer.msg(' 添加失败', {icon: 2});
                    }
                }
            })

        })
//        点击返回
        $('#back').click(function(){
            self.parent.document.getElementById('iframe').src='/video/videoManager'
        })
    })
</script>
</html>
